<template>
    <view class="work-container">
        <uni-header :title="'我分享的主题'"></uni-header>
        <view class="work-content">
            <view class="content-list" v-for="item in themeData" @click="handleClick(item)">
                <view class="head-bar">
                    <u--image :showLoading="true" :src="imgUrl+item.accessory" width="80px" height="80px"></u--image>
                    <view class="right">
                        <view class="title">{{item.title}}</view>
                        <view class="text">{{item.name}}</view>
                    </view>
                </view>
                <view class="foot-bar">
                    <view class="left">
                        <u--image :src="imgUrl+item.create_icon" width="30px" height="30px" shape="circle"></u--image>
                        <text class="name">{{item.userName}}<text class="time">{{item.create_time}}</text></text>
                    </view>
                    <view class="option-right">
                        <u-icon name="thumb-up" size="20"></u-icon>{{item.like_num}}
                        <u-icon name="star" size="20"></u-icon>{{item.collect_num}}
                        <u-icon name="chat" size="20"></u-icon>{{item.review_num}}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import config from '@/config'
    import { getTheme } from '@/api/mine'
    export default {
        data() {
            return {
                themeData:[],
                imgUrl: config.imgUrl,
            }
        },
        created(){
            this.getThemeData();
        },
        methods: {
            handleClick(item) {
                this.$tab.navigateTo(`/pages/work/topicdetails?themeId=`+item.id)
            },
            getThemeData(){
                getTheme({ deviceId: this.$store.state.user.deviceId}).then(res=>{
                    this.themeData = res.records;
                })
            }
        }
    }
</script>

<style lang="scss">
    page{
        background: #ddd;
    }
    .work-container{
        .work-content{
            .content-list{
                background: #fff;
                padding: 10px 10px 0;
                margin: 10px;
                .head-bar{
                    display: flex;
                    align-items: center;
                    .right{
                        margin-left: 15px;
                        .title{
                            font-size: 20px;
                            color:#666;
                        }
                        .text{
                            font-size: 14px;
                            color:#999;
                        }
                    }
                }
                .foot-bar{
                    display: flex;
                    background: #dfdfe2ad;
                    justify-content: space-between;
                    margin: 10px -10px;
                    padding: 5px 10px;
                    .left{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .name{
                            margin-left: 5px;
                            color:#2c2c2c;
                            font-size: 12px;
                            .time{
                                margin-left: 5px;
                                color:#666;
                            }
                        }
                    }
                    .option-right{
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                        color:#999;
                    }
                }
            }
        }
    }
</style>
